<template>
    <div>
        <h3>示例</h3>
        <div>
            <editTablePage v-bind="tableParams" ref="table">
                <template #table_before>
                    <slot name="table_before_son"></slot>
                </template>
                <template #table_after>
                    <slot name="table_after_son"></slot>
                </template>
            </editTablePage>
        </div>
        <div class="markdown-body">
            <editTableMD></editTableMD>
        </div>
    </div>
</template>
<script>
import editTablePage from '@/components/baseComponents/EditTable'
import editTableMD from "../md/editTableMD.md"
import {queryApi, fileUpload, fileUploadvideo} from '@/api/api'
import validate from '@/assets/js/validators'
export default {
    name: 'editTable',
    components: {
        editTablePage,
        editTableMD
    },
    data() {
        return {
            tableParams:{
                tableRowClassName:this.tableRowClassNameColor,
                // 表格接口地址  详细地址在api配置
                // url:urlCommon.queryApi.url,
                // height:''
                // apiName: "",//"queryApi"
                tableStyle: 1, //1--主子表格上下布局  2---主子表格左右布局
                // 风格主题
                // tooltip:"dark",
                // 表头数据
                columns:[
                    {prop: '', label: '', width: '60', align: 'center',type:"selection",fixed:'',isShow:true},
                    {prop: 'classificationStr', label: '商品分类', align: 'center',type:"input",fixed:'',isShow:false,},
                    {prop: 'levelString', label: '等级', align: 'center',type:"dictionary",fixed:'',filterProp:[{"level":1,"levelString":"一级"},{"level":2,"levelString":"二级"},{"level":3,"levelString":"三级"}],propString:"level",isShow:true},
                    // propString 最后要转换为文字的字段 formatterArrayString:"LEVEL",
                    //filterProp:自定义数据字典  filterProp:[{"level":1,"levelString":"一级"},{"level":2,"levelString":"二级"},{"level":3,"levelString":"三级"}]
                    //formatterArrayString:接口返回数据字典数据名 例如:"LEVEL" "IS_MARRY"
                    {prop: 'levelDesc', label: '审核结果', align: 'center',type:"",fixed:'',isShow:true,isSortable:"custom"}
                ],
                //新增行数据初始化
                rowDataJson: {
                    "classificationStr":"","commodityTypeId":"","level":'',"levelDesc":""
                },
                rules:{
                    "classificationStr":[{ required: true, message: '请输入商品分类', trigger: 'blur' },
                    {validator: validate().upLetter, trigger: 'blur'}],
                },
                // 表格数据
                tableData: [
                    {id:1,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护口罩","commodityTypeId":"10000","level":2,"levelDesc":"可以上"},
                    {id:2,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 一次性口罩","commodityTypeId":"10001","level":3,"levelDesc":"可以上"},
                    {id:3,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护面具及配件","commodityTypeId":"10002","level":1,"levelDesc":"可以上"},
                    {id:4,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":3,"levelDesc":"可以上"},
                    {id:5,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 一次性口罩","commodityTypeId":"10001","level":2,"levelDesc":"可以上"},
                    {id:6,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护面具及配件","commodityTypeId":"10002","level":1,"levelDesc":"可以上"},
                    {id:7,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":3,"levelDesc":"可以上"},
                    {id:8,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 一次性口罩","commodityTypeId":"10001","level":1,"levelDesc":"可以上"},
                    {id:9,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护面具及配件","commodityTypeId":"10002","level":1,"levelDesc":"可以上"},
                    {id:10,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":1,"levelDesc":"可以上"},
                    {id:11,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":1,"levelDesc":"可以上"},
                    {id:12,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 一次性口罩","commodityTypeId":"10001","level":1,"levelDesc":"可以上"},
                    {id:13,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护面具及配件","commodityTypeId":"10002","level":1,"levelDesc":"可以上"},
                    {id:14,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":1,"levelDesc":"可以上"},
                    {id:15,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 一次性口罩","commodityTypeId":"10001","level":1,"levelDesc":"可以上"},
                    {id:16,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护面具及配件","commodityTypeId":"10002","level":1,"levelDesc":"可以上"},
                    {id:17,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":1,"levelDesc":"可以上"}, 
                ],
                //主表主键  主子表的时候必填
                id: "id",
                // 分页
                pageSizeOpt: ['10','20','50','100','200'],
                pageNum:1,
                pageSize:10,
                // 表格高度最大值
                maxHeight:300, //上下布局主子表250 单表450
            },
        }
    },
    // mounted() {
    //     this.initTable()
    // },
    methods: {
        tableRowClassNameColor({row,rowIndex}){
            if (rowIndex%2 == 0) {
                return 'warning-row';
            } else{
                return 'success-row';
            }
            return '';
        },
        // 选中触发的事件
        selectionChange(selection){
            // 表格选中的数据
            this.selectedData = selection;
            this.$emit("selectedData",selection);
        },
        initTable() {
            this.$refs['table'].query({})
        },
    }
}
</script>
<style>
.el-table .warning-row {
    background: #FFF;
}
.el-table .success-row {
    background: #f0f9eb;
}
</style>


